<template>
    <div class="wrap">
        <div class="line_one" >
           <div  v-for="(item ,index) in AvatarArr.slice(0,5)"  :key="index" class="container">
            <el-avatar :src="item" fit="fill"></el-avatar>
            <span class="avatar_tit">hello</span>
           </div> 
           <br>
           <div  v-for="(item ,index) in AvatarArr.slice(5,AvatarArr.length)"  :key="index" class="container">
            <el-avatar :src="item" fit="fill"></el-avatar>
            <span class="avatar_tit">hello</span>
           </div>
        </div>
    </div>
</template>
<script>
    const Avatar = require.context('@/assets/Avatar', false, /\.(png|jpg|jpeg|gif|webp)$/);//读取图片,返回一个函数
    export default{
    name:'AvatarDom',
    computed:{
    AvatarArr()
    {    
        const Imggroup = Array.from({ length: 10 }, (_, i) => i + 1);//获取文件名数组。
        const imagesArray = Imggroup.map((index) => Avatar(`./${index}.webp`));//此函数根据文件名返回其路径。
        return imagesArray;
    }
  },
 
 }
</script>
<style scoped>
.wrap{
   max-width: 1200px;
   margin: 0 auto;
}
 .container{
   
    position: relative;
    display: inline-block;
    padding: 25px 0;
    margin-right: 60px;
    margin-top:40px;
    background-color:#fbfbfd;
 }
 .avatar_tit{
    position:absolute;
    top: 200px;
    right: 70px;
 }
 .el-avatar{
    width:140px;
    height: 140px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top:40px;
    margin-bottom:60px;
 }
</style>